<!-- 带缩略图的轮播 -->
<template>
  <div>
    <div v-swiper:mySwiper="swiperOption" class="swiper-container gallery-top">
      <div class="swiper-wrapper">
        <div v-for="(item,index) in 4" :key="index" class="swiper-slide">
          <div class="item">
            <img src="~static/img/t1.jpg">
          </div>
        </div>
      </div>
    </div>
    <div v-swiper:mySwiper="swiperOption2" class=" gallery-thumbs">
      <div class="swiper-wrapper">
        <div v-for="(item,index) in 4" :key="index" class="swiper-slide">
          <div class="item">
            <img src="~static/img/t1.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      swiperOption: {
        spaceBetween: 10,
        simulateTouch: false, // 禁止鼠标模拟
        direction: 'vertical',
        effect: 'fade',
        autoplay: {
          delay: 2500,
          disableOnInteraction: false
        },
        loop: true,
        thumbs: {
          swiper: this.swiperOption2
        }
      },
      swiperOption2: {
        spaceBetween: 10,
        resistanceRatio: 0, // 静止鼠标拖动回弹
        slidesPerView: 4,
        watchSlidesVisibility: true,
        watchSlidesProgress: true
      }

    }
  }
}
</script>

<style lang='scss'>
.swiper-container {
  width: 100%;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
}

.gallery-top {
  height: 80%;
  width: 100%;
}
.gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
}
.gallery-thumbs{
  background: #eee;
}
</style>
